Search for notes by fellow students, in your own course and all over the country.
Browse our notes for titles which look like what you need, you can preview any of the notes via a sample of the contents. After you're happy these are the notes you're after simply pop them into your shopping cart.
Title: Reactjs Interview Questions Description: React is a JavaScript-based UI development library. Facebook and an open-source developer community run it. Although React is a library rather than a language, it is widely used in web development. The library first appeared in May 2013 and is now one of the most commonly used frontend libraries for web development.in this notes i have done 300+ interview questions and answers so that is best for interview from my side
Questions Core React What is React? What are the major features of React? What is JSX? What is the difference between Element and Component? How to create components in React? When to use a Class Component over a Function Component? What are Pure Components? What is state in React? What are props in React? What is the difference between state and props? Why should we not update the state directly? What is the purpose of callback function as an argument of setState()? What is the difference between HTML and React event handling? How to bind methods or event handlers in JSX callbacks? How to pass a parameter to an event handler or callback? What are synthetic events in React? What are inline conditional expressions? What is “key” prop and what is the benefit of using it in arrays of elements? What is the use of refs? How to create refs? What are forward refs? 1
No
...
Questions
60 61 62 63 64 65
How to use InnerHtml in React? How to use styles in React? How events are different in React? What will happen if you use setState in constructor? What is the impact of indexes as keys? Is it good to use setState() in componentWillMount() method? What will happen if you use props in initial state? How do you conditionally render components? Why we need to be careful when spreading props on DOM elements?? How you use decorators in React? How do you memoize a component? How you implement Server-Side Rendering or SSR? How to enable production mode in React? What is CRA and its benefits? What is the lifecycle methods order in mounting? What are the lifecycle methods going to be deprecated in React v16? What is the purpose of getDerivedStateFromProps() lifecycle method? What is the purpose of getSnapshotBeforeUpdate() lifecycle method? Do Hooks replace render props and higher order components? What is the recommended way for naming components? What is the recommended ordering of methods in component class? What is a switching component? Why we need to pass a function to setState()? What is strict mode in React? What are React Mixins? Why is isMounted() an anti-pattern and what is the proper solution? What are the Pointer Events supported in React? Why should component names start with capital letter? Are custom DOM attributes supported in React v16? What is the difference between constructor and getInitialState? Can you force a component to re-render without calling setState? What is the difference between super() and super(props) in React using ES6 classes? How to loop inside JSX?
Questions React Router What is React Router? How React Router is different from history library? What are the components of React Router v4? What is the purpose of push and replace methods of history? How do you programmatically navigate using React router v4? How to get query parameters in React Router v4 Why you get “Router may have only one child element” warning? How to pass params to history
...
Questions
162 163 164
How to use connect from React Redux? How to reset state in Redux? Whats the purpose of at symbol in the redux connect decorator? What is the difference between React context and React Redux? Why are Redux state functions called reducers? How to make AJAX request in Redux? Should I keep all component’s state in Redux store? What is the proper way to access Redux store? What is the difference between component and container in React Redux? What is the purpose of the constants in Redux? What are the different ways to write mapDispatchToProps()? What is the use of the ownProps parameter in mapStateToProps() and mapDispatchToProps()? How to structure Redux top level directories? What is redux-saga? What is the mental model of redux-saga? What are the differences between call and put in redux-saga What is Redux Thunk? What are the differences between redux-saga and redux-thunk What is Redux DevTools? What are the features of Redux DevTools? What are Redux selectors and Why to use them? What is Redux Form? What are the main features of Redux Form? How to add multiple middlewares to Redux? How to set initial state in Redux? How Relay is different from Redux? What is an action in Redux? React Native What is the difference between React Native and React? How to test React Native apps? How to do logging in React Native? How to debug your React Native? React supported libraries and Integration What is reselect and how it works? What is Flow? What is the difference between Flow and PropTypes?
No
...
js? What is the difference between React and Angular? Why React tab is not showing up in DevTools? What are styled components? Give an example of Styled Components? What is Relay? How to use TypeScript in create-react-app application? Miscellaneous What are the main features of reselect library? Give an example of reselect usage? Does the statics object work with ES6 classes in React? Can Redux only be used with React? Do you need to have a particular build tool to use Redux? How Redux Form initialValues get updated from state? How React PropTypes allow different type for one prop? Can I import an SVG file as react component? Why are inline ref callbacks or functions not recommended? What is render hijacking in React? What are HOC factory implementations? How to pass numbers to React component? Do I need to keep all my state into Redux? Should I ever use react internal state? What is the purpose of registerServiceWorker in React? What is React memo function? What is React lazy function? How to prevent unnecessary updates using setState? How do you render Array, Strings and Numbers in React 16 Version? How to use class field declarations syntax in React classes? What are hooks? What rules need to be followed for hooks? How to ensure hooks followed the rules in your project? What are the differences between Flux and Redux? What are the benefits of React Router V4? Can you describe about componentDidCatch lifecycle method signature?
What are the conditions to safely use the index as a key? Is it keys should be globally unique? What is the popular choice for form handling? What are the advantages of formik over redux form library? Why do you not required to use inheritance? Can I use web components in react application? What is dynamic import? What are loadable components? What is suspense component? What is route based code splitting? Give an example on How to use context? What is the purpose of default value in context? How do you use contextType? What is a consumer? How do you solve performance corner cases while using context? What is the purpose of forward ref in HOCs? Is it ref argument available for all functions or class components? Why do you need additional care for component libraries while using forward refs? How to create react class components without ES6? Is it possible to use react without JSX? What is diffing algorithm? What are the rules covered by diffing algorithm? When do you need to use refs? Is it prop must be named as render for render props? What are the problems of using render props with pure components? How do you create HOC using render props? What is windowing technique? How do you print falsy values in JSX? What is the typical use case of portals? How do you set default value for uncontrolled component? What is your favorite React stack? What is the difference between Real DOM and Virtual DOM? How to add Bootstrap to a react application? Can you list down top websites or applications using react as front end framework? Is it recommended to use CSS In JS technique in React?
No
...
9? What is the purpose of eslint plugin for hooks? What is the difference between Imperative and Declarative in React? What are the benefits of using typescript with reactjs? How do you make sure that user remains authenticated on page refresh while using Context API State Management? What are the benefits of new JSX transform? How does new JSX transform different from old transform? How do you get redux scaffolding using create-react-app? What are React Server components? What is prop drilling? What is state mutation and how to prevent it? What is the difference between useState and useRef hook?
Core React 1
...
It is used for handling view layer for web and mobile apps
...
React was first deployed on Facebook’s News Feed in 2011 and on Instagram in 2012
...
What are the major features of React? The major features of React are: • It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive
...
• Follows Unidirectional data flow or data binding
...
� Back to Top 3
...
Basically it just provides syntactic sugar for the React
...
In the example below text inside
tag is returned as JavaScript function to the render function
...
Component { render() { return(
{'Welcome to React world!'}
) } } � Back to Top 4
...
Elements can 11
contain other Elements in their props
...
Once an element is created, it is never mutated
...
createElement( 'div', {id: 'login-btn'}, 'Login' ) The above React
...
render():
Login
Whereas a component can be declared in several different ways
...
In either case, it takes props as an input, and returns a JSX tree as the output: const Button = ({ onLogin }) =>
Login
Then JSX gets transpiled to a React
...
createElement( 'div', { id: 'login-btn', onClick: onLogin }, 'Login' ) � Back to Top 5
...
1
...
Those are pure JavaScript functions that accept props object as the first parameter and return React elements:
12
“jsx harmony function Greeting({ message }) {
{Hello, ${message}‘}
return
} “‘ 2
...
The above function component can be written as: jsx harmony render() { } }
class Greeting extends React
...
props
...
When to use a Class Component over a Function Component? If the component needs state or lifecycle methods then use class component otherwise use function component
...
8 with the addition of Hooks, you could use state , lifecycle methods and other features that were only available in class component right in your function component
...
What are Pure Components? React
...
Component except that it handles the shouldComponentUpdate() method for you
...
Component on the other hand won’t compare current props and state to next out of the box
...
� Back to Top 8
...
We should always try to make our state as simple as possible and minimize the number of stateful components
...
Component { constructor(props) { super(props) this
...
state
...
e
...
� Back to Top 9
...
They are single values or objects containing a set of values that are passed to components on creation using a naming convention similar to HTML-tag attributes
...
14
The primary purpose of props in React is to provide following component functionality: 1
...
2
...
3
...
props
...
For example, let us create an element with reactProp property: jsx harmony
This reactProp (or whatever you came up with) name then becomes a property attached to React’s native props object which originally already exists on all components created using React library
...
reactProp � Back to Top 10
...
While both of them hold information that influences the output of render, they are different in their functionality with respect to component
...
� Back to Top 11
...
//Wrong this
...
message = 'Hello world' Instead use setState() method
...
When state changes, the component responds by rerendering
...
setState({ message: 'Hello World' }) Note: You can directly assign to the state object either in constructor or using latest javascript’s class field declaration syntax
...
What is the purpose of callback function as an argument of setState()? The callback function is invoked when setState finished and the component gets rendered
...
Note: It is recommended to use lifecycle method rather than this callback function
...
log('The name has updated and component re-ren � Back to Top 13
...
In HTML, the event name usually represents in lowercase as a convention:
; } return this
...
children; } } � Back to Top 245
...
The below methods are called in the following order when a component is being re-rendered
...
1
...
componentDidCatch() � Back to Top 247
...
Usually, you don’t need to set it explicitly because it’s inferred from the name of the function or class that defines the component
...
For example, To ease debugging, choose a display name that communicates that it’s the result of a withSubscription HOC
...
Component {/*
...
displayName = `WithSubscription(${getDisplayName(WrappedComponent)}) return WithSubscription; } function getDisplayName(WrappedComponent) { return WrappedComponent
...
name || 'Component'; } � Back to Top 248
...
If you use es5-shim and es5-sham polyfill then it even support old browsers that doesn’t support ES5 methods
...
What is the purpose of unmountComponentAtNode method? This method is available from react-dom package and it removes a mounted React component from the DOM and clean up its event handlers and state
...
Returns true if a component was unmounted and false if there was no component to unmount
...
unmountComponentAtNode(container) � Back to Top 250
...
The react project supports code splitting via dynamic import() feature
...
js and all its unique dependencies as a separate chunk that only loads after the user clicks the ‘Load’ button
...
js const moduleA = 'Hello'; export { moduleA }; App
...
/moduleA')
...
catch(err => { // Handle failure });
118
}; render() { return (
...
What is the benefit of strict mode? The will be helpful in the below cases 1
...
3
...
5
...
Warning about legacy string ref API usage
...
Detecting legacy context API
...
What are Keyed Fragments? The Fragments declared with the explicit
...
The general use case is mapping a collection to an array of fragments as below, function Glossary(props) { return (
{props
...
map(item => ( // Without the `key`, React will fire a key warning
...
id}>
{item
...
description}
...
In the future, there might be a support for additional attributes, such as event handlers
...
Does React support all HTML attributes? As of React 16, both standard or custom DOM attributes are fully supported
...
Let us take few props with respect to standard HTML attributes,
// Just like node
...
className DOM API // Just like node
...
It also support all SVG attributes
...
What are the limitations with HOCs? Higher-order components come with a few caveats apart from its benefits
...
Don’t use HOCs inside the render method: It is not recommended to apply a HOC to a component within the render method of a component
...
Instead, apply HOCs outside the component definition so that the resulting component is created only once
...
Static methods must be copied over: When you apply a HOC to a component the new component does not have any of the static methods of the original component // Define a static method WrappedComponent
...
*/ } // Now apply a HOC const EnhancedComponent = enhance(WrappedComponent); // The enhanced component has no static method typeof EnhancedComponent
...
Component {/*
...
staticMethod = WrappedComponent
...
Refs aren’t passed through: For HOCs you need to pass through all props to the wrapped component but this does not work for refs
...
In this case you need to use the React
...
How to debug forwardRefs in DevTools? React
...
For example, If you don’t name the render function or not using displayName property then it will appear as ”ForwardRef” in the DevTools, const WrappedComponent = React
...
props} forwardedRef={ref} />; }); But If you name the render function then it will appear as ”ForwardRef(myFunction)” const WrappedComponent = React
...
props} forwardedRef={ref} />;
121
} ); As an alternative, You can also set displayName property for forwardRef function, function logProps(Component) { class LogProps extends React
...
} function forwardRef(props, ref) { return
...
// e
...
"ForwardRef(logProps(MyComponent))" const name = Component
...
name; forwardRef
...
forwardRef(forwardRef); } � Back to Top 256
...
This behavior is available so that it matches the behavior of HTML
...
What is NextJS and major features of it? Next
...
It also provides styling and routing solutions
...
2
...
4
...
6
...
js HTTP server Customizable with your own Babel and Webpack configurations
� Back to Top 258
...
It can be used in child component as below,
...
Is it good to use arrow functions in render methods? Yes, You can use
...
But you need to optimize the performance while using it
...
log('Click happened'); } render() { return this
...
How to prevent a function from being called multiple times? If you use an event handler such as onClick or onScroll and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed
...
Throttling: Changes based on a time based frequency
...
throttle lodash function 2
...
For example, it can be used using _
...
RequestAnimationFrame throttling: Changes based on requestAnimationFrame
...
How JSX prevents Injection Attacks? React DOM escapes any values embedded in JSX before rendering them
...
Everything is converted to a string before being rendered
...
potentiallyMaliciousInput; const element =
{name}
; This way you can prevent XSS(Cross-site-scripting) attacks in the application
...
How do you update rendered elements? You can update UI(represented by rendered element) by passing the newly created element to ReactDOM’s render method
...
toLocaleTimeString()}
...
render(element, document
...
How do you say that props are readonly? When you declare a component as a function or a class, it must never modify its own props
...
Hence, React has a single rule saying “All React components must act like pure functions with respect to their props
...
How do you say that state updates are merged? When you call setState() in the component, React merges the object you provide into the current state
...
state = { posts: [], comments: [] }; } Now you can update them independently with separate setState() calls as below, componentDidMount() { fetchPosts()
...
setState({ posts: response
...
then(response => {
125
this
...
comments }); }); } As mentioned in the above code snippets, this
...
� Back to Top 265
...
This can be achieved through arrow functions or bind method
...
updateUser(userId, e)}>Update User details
...
bind(this, userId)}>Update User details In the both approaches, the synthetic argument e is passed as a second argument
...
� Back to Top 266
...
This way it can conditionally render component
...
loggedIn) { return null; } return (
welcome, {props
...
Component { constructor(props) { super(props); this
...
state
...
state
...
� Back to Top 267
...
1
...
The items in the list have no ids 3
...
� Back to Top 268
...
i
...
For example, the below Book component uses two arrays with different arrays, function Book(props) { const index = (
{props
...
map((page) =>
...
title}
)}
); const content = props
...
map((page) =>
...
title}
{page
...
pageNumber}
); return (
{index} {content}
); } � Back to Top 269
...
In detail, You can categorize them as follows, 1
...
Validation and error messages 3
...
� Back to Top 270
...
The form state is inherently short-term and local, so tracking it in Redux (or any kind of Flux library) is unnecessary
...
Redux-Form calls your entire top-level Redux reducer multiple times ON EVERY SINGLE KEYSTROKE
...
Why are you not required to use inheritance? In React, it is recommended to use composition over inheritance to reuse code between components
...
Whereas, If you want to reuse non-UI functionality between components, it is suggested to extract it into a separate JavaScript module
...
� Back to Top 272
...
Even though many developers won’t use this combination, it may require especially if you are using third-party UI components that are written using Web Components
...
/App
...
129
What is dynamic import? You can achieve code-splitting in your app using dynamic import
...
Normal Import import { add } from '
...
log(add(10, 20)); 2
...
/math")
...
log(math
...
What are loadable components? If you want to do code-splitting in a server rendered app, it is recommend to use Loadable Components because React
...
Loadable lets you render a dynamic import as a regular component
...
/OtherComponent')) function MyComponent() { return (
) } Now OtherComponent will be loaded in a separated bundle � Back to Top 275
...
This can be done using Suspense component
...
lazy(() => import('
...
}>
); } As mentioned in the above code, Suspense is wrapped above the lazy component
...
What is route based code splitting? One of the best place to do code splitting is with routes
...
Due to this, the user experience won’t be disturbed
...
lazy, import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense, lazy } from 'react'; const Home = lazy(() => import('
...
/routes/About')); const App = () => ( Loading
...
� Back to Top 277
...
For example, in the code below lets manually thread through a “theme” prop in order to style the Button component
...
createContext('luna'); // Create App component where it uses provider to pass theme value in the tree class App extends React
...
Provider value="nova">
...
Component { static contextType = ThemeContext; render() { return
...
132
What is the purpose of default value in context? The defaultValue argument is only used when a component does not have a matching Provider above it in the tree
...
Below code snippet provides default theme value as Luna
...
createContext(defaultValue); � Back to Top 279
...
The contextType property can be used in two ways, 1
...
createContext()
...
context in any of the lifecycle methods and render function
...
Component { componentDidMount() { let value = this
...
context; /*
...
context; /*
...
context; /* render something based on the value of MyContext */ } } MyClass
...
Static field You can use a static class field to initialize your contextType using public class field syntax
...
Component { static contextType = MyContext; render() { let value = this
...
What is a consumer? A Consumer is a React component that subscribes to context changes
...
The value argument passed to the function will be equal to the value prop of the closest Provider for this context above in the tree
...
Consumer> {value => /* render something based on the context value */ }
...
How do you solve performance corner cases while using context? The context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider’s parent re-renders
...
class App extends React
...
Component { constructor(props) { super(props); this
...
state
...
What is the purpose of forward ref in HOCs? Refs will not get passed through because ref is not a prop
...
If you add a ref to a HOC, the ref will refer to the outermost container component, not the wrapped component
...
For example, we can explicitly forward refs to the inner FancyButton component using the React
...
The below HOC logs all props, function logProps(Component) { class LogProps extends React
...
log('old props:', prevProps); console
...
props); } render() { const {forwardedRef,
...
props; // Assign the custom prop "forwardedRef" as a ref return
...
forwardRef((props, ref) => { 135
return
...
Component { focus() { //
...
} export default logProps(FancyButton); Now let’s create a ref and pass it to FancyButton component
...
import FancyButton from '
...
createRef(); ref
...
focus(); label="Click Me" handleClick={handleClick} ref={ref} />; � Back to Top 283
...
The second ref argument only exists when you define a component with React
...
� Back to Top 284
...
This is because your library likely has a different behavior such as what
136
refs get assigned to, and what types are exported
...
� Back to Top 285
...
For default props, you need to define getDefaultProps() as a function on the passed object
...
var Greeting = createReactClass({ getDefaultProps: function() { return { name: 'Jhohn' }; }, getInitialState: function() { return {message: this
...
message}; }, handleClick: function() { console
...
state
...
props
...
i
...
bind(this) with in constructor for event handlers
...
Is it possible to use react without JSX? Yes, JSX is not mandatory for using React
...
Each JSX element is just syntactic sugar for calling React
...
children)
...
Component { render() {
137
return
Hello {this
...
message}
; } } ReactDOM
...
getElementById('root') ); You can write the same code without JSX as below, class Greeting extends React
...
createElement('div', null, `Hello ${this
...
message}`); } } ReactDOM
...
createElement(Greeting, {message: 'World'}, null), document
...
What is diffing algorithm? React needs to use algorithms to find out how to efficiently update the UI to match the most recent tree
...
However, the algorithms have a complexity in the order of O(n3) where n is the number of elements in the tree
...
This is far too expensive
...
Two elements of different types will produce different trees
...
The developer can hint at which child elements may be stable across different renders with a key prop
...
What are the rules covered by diffing algorithm? When diffing two trees, React first compares the two root elements
...
It covers
138
the below rules during reconciliation algorithm, 1
...
For example, elements to , or from to of different types lead a full rebuild
...
DOM Elements Of The Same Type: When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes
...
Component Elements Of The Same Type: When a component updates, the instance stays the same, so that state is maintained across renders
...
After that, the render() method is called and the diff algorithm recurses on the previous result and the new result
...
Recursing On Children: when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there’s a difference
...
first
second
first
second
third
5
...
When children have keys, React uses the key to match children in the original tree with children in the subsequent tree
...
When do you need to use refs? There are few use cases to go for refs, 1
...
2
...
3
...
� Back to Top 290
...
i
...
Lets take an example with the children prop for render props, (
The mouse position is {mouse
...
y}
)}/> Actually children prop doesn’t need to be named in the list of “attributes” in JSX element
...
x}, {mouse
...
Mouse
...
func
...
What are the problems of using render props with pure components? If you create a function inside a render method, it negates the purpose of pure component
...
You can solve this issue by defining the render function as instance method
...
How do you create HOC using render props? You can implement most higher-order components (HOC) using a regular component with a render prop
...
function withMouse(Component) { return class extends React
...
this
...
� Back to Top 293
...
If your application renders long lists of data then this technique is recommended
...
� Back to Top 294
...
If you still want to display them then you need to convert it to string
...
� Back to Top 295
...
g
...
For example, dialogs, global message notifications, hovercards, and tooltips
...
How do you set default value for uncontrolled component? In React, the value attribute on form elements will override the value in the DOM
...
To handle this case, you can specify a defaultValue attribute instead of value
...
handleSubmit}>